import React from "react";
import { Card, Descriptions, Skeleton } from "antd";
import type { CourseInfo } from "../../../types";

interface CourseInfoProps {
  courseInfo: CourseInfo;
  loading: boolean;
}

const CourseInfoComponent: React.FC<CourseInfoProps> = ({
  courseInfo,
  loading,
}) => {
  if (loading) {
    return <Skeleton active />;
  }

  return (
    <Card>
      <Descriptions title="课程信息" bordered>
        <Descriptions.Item label="课程名称">
          {courseInfo.name}
        </Descriptions.Item>
        <Descriptions.Item label="任课教师">
          {courseInfo.teacherName}
        </Descriptions.Item>
        <Descriptions.Item label="学期">
          {courseInfo.semester}
        </Descriptions.Item>
        <Descriptions.Item label="上课时间">
          {courseInfo.schedule}
        </Descriptions.Item>
        <Descriptions.Item label="上课地点">
          {courseInfo.classroom}
        </Descriptions.Item>
        <Descriptions.Item label="学分">{courseInfo.credit}</Descriptions.Item>
        {courseInfo.description && (
          <Descriptions.Item label="课程描述" span={3}>
            {courseInfo.description}
          </Descriptions.Item>
        )}
      </Descriptions>
    </Card>
  );
};

export default CourseInfoComponent;
